{include file="home/include/header.html"}

<!-- Page Banner Start -->
<div class="page-banner section">
    <div class="container">
        <div class="page-banner-wrapper text-center">
            <h2 class="title">Register</h2>
            <ul class="breadcrumb justify-content-center">
                <li class="breadcrumb-item"><a href="index.html">Home</a></li>
                <li class="breadcrumb-item active">Register</li>
            </ul>
        </div>
    </div>
</div>
<!-- Page Banner End -->

<!-- Login & Register Start -->
<div class="section section-padding-02 mt-n1">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-6">
                <!-- Login & Register Start -->
                <div class="login-register-wrapper">
                    <h4 class="title">Login to Your Account</h4>
                    <p>Already have an account? <a href="login.html">Log in instead!</a></p>
                    <form action="#" class="register-form">
                        <div class="single-form">
                            <label>Nickname *</label>
                            <input type="text" name="nickname">
                        </div>
                        <div class="single-form">
                            <label>Username *</label>
                            <input type="text" name="username">
                        </div>
                        <div class="single-form">
                            <label>Password</label>
                            <input type="password" name="pass">
                        </div>
                        <div class="single-form">
                            <label>Confirm Password</label>
                            <input type="password" name="re_pass">
                        </div>
                        <div class="single-form">
                            <button class="btn btn-primary btn-hover-dark rounded-pill btn-submit" type="button" data-form="register-form">Register</button>
                        </div>
                    </form>
                </div>
                <!-- Login & Register End -->
            </div>
        </div>
    </div>
</div>
<!-- Login & Register End -->

{include file="home/include/footer.html"}
<script>
    {literal}
    $('.btn-submit').click(function(){
        let from = $(this).attr('data-from');
        let nickname = $('input[name=nickname]').val() , username = $('input[name=username]').val() , pass = $('input[name=pass]').val() , re_pass = $('input[name=re_pass]').val();
        if (nickname){
            layer.msg('请输入昵称', {icon: 5});
        }
        let validTips = {
            'nickname' : '昵称' , 'username' : '用户名' , 'pass' : '密码', 're_pass' : '确认密码'
        };
        let error = false , data = {};
        for (let item in validTips){
            let val = $('input[name=' + item + ']')
            if (val.val().trim() == '' && !error){
                layer.msg('请输入' + validTips[item], {icon: 5});
                val.focus();
                error = true;
                break;
            }
            data[item] = val.val().trim();
        }
        if (error){
            return;
        }
        if (data['pass'] != data['re_pass']){
            layer.msg('两次密码输入不一致', {icon: 5});
            return;
        }
        $.post('/api/member-api/register' , data , function(res){
            layer.msg(res.msg, {icon: res.code == 200 ? 1 : 5});
            if (res.code == 200){
                window.location.href = '/index/account';
            }
        } , 'json');
    })
    {/literal}
</script>